<section class="code-box" [class.expand]="expanded()" [attr.id]="nzId">
  <section class="code-box-demo">
    @if (!nzIframe || !iframe) {
      @let simulateIframe = nzIframe && !iframe;
      <div
        [class.simulate-iframe]="simulateIframe"
        [class.browser-mockup]="simulateIframe"
        [class.with-url]="simulateIframe"
      >
        <div [style.height.px]="simulateIframe && nzIframeHeight">
          <ng-content select="[demo]"></ng-content>
        </div>
      </div>
    } @else {
      <div class="browser-mockup with-url">
        <iframe [src]="iframe" [height]="nzIframeHeight" title="demo"></iframe>
      </div>
    }
  </section>
  <section class="code-box-meta markdown">
    <div class="code-box-title">
      <a (click)="navigateToFragment()">{{ nzTitle }}</a>
      <a class="edit-button" [attr.href]="nzHref" target="_blank" rel="noopener noreferrer">
        <nz-icon nzType="edit" />
      </a>
    </div>
    <div class="code-box-description">
      <ng-content select="[intro]"></ng-content>
    </div>
    <div class="code-box-actions">
      <nz-icon
        nz-tooltip
        [nzTooltipTitle]="
          !onlineIDELoading()
            ? language() === 'zh'
              ? '在 StackBlitz 上打开'
              : 'Edit On StackBlitz'
            : language() === 'zh'
              ? '加载中...'
              : 'Loading...'
        "
        nzType="thunderbolt"
        (click)="openOnlineIDE()"
      />
      <nz-icon
        nz-tooltip
        [nzTooltipTitle]="
          !codeLoading()
            ? language() === 'zh'
              ? '复制代码'
              : 'Copy Code'
            : language() === 'zh'
              ? '加载中...'
              : 'Loading...'
        "
        [nzType]="copied() ? 'check' : 'snippets'"
        [class.ant-tooltip-open]="copied()"
        (click)="copyCode()"
      />
      @if (nzGenerateCommand) {
        <nz-icon
          nz-tooltip
          [nzTooltipTitle]="language() === 'zh' ? '复制生成代码命令' : 'Copy Generate Command'"
          [nzType]="commandCopied() ? 'check' : 'code'"
          [class.ant-tooltip-open]="commandCopied()"
          (click)="copyGenerateCommand(nzGenerateCommand)"
        />
      }
      <span
        nz-tooltip
        [nzTooltipTitle]="
          expanded() ? (language() === 'zh' ? '收起代码' : 'Hide Code') : language() === 'zh' ? '显示代码' : 'Show Code'
        "
        (click)="expandCode(!expanded())"
      >
        <nz-icon [class.code-expand-icon-show]="expanded()" [class.code-expand-icon-hide]="!expanded()">
          <svg viewBox="0 0 1024 1024" fill="currentColor">
            <path
              d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62z"
              fill-rule="evenodd"
              opacity="0.78"
            ></path>
          </svg>
        </nz-icon>
        <nz-icon [class.code-expand-icon-show]="!expanded()" [class.code-expand-icon-hide]="expanded()">
          <svg viewBox="0 0 1024 1024" fill="currentColor">
            <path
              d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62zm529.545-377.146c24.911 9.066 37.755 36.61 28.688 61.522L436.03 861.068c-9.067 24.911-36.611 37.755-61.522 28.688-24.911-9.066-37.755-36.61-28.688-61.522l242.15-665.302c9.067-24.911 36.611-37.755 61.522-28.688z"
              fill-rule="evenodd"
              opacity="0.78"
            ></path>
          </svg>
        </nz-icon>
      </span>
    </div>
  </section>
  <section class="highlight-wrapper" [class.highlight-wrapper-expand]="expanded()">
    <div class="highlight">
      <ng-content select="[code]"></ng-content>
      <nz-highlight [nzCode]="codeLoaded() ? highlightCode()! : language() === 'zh' ? '加载中' : 'Loading...'" />
    </div>
  </section>
</section>
@if (!!nzVersion) {
  <div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rt">
    <div class="ant-ribbon-text">{{nzVersion}}</div>
    <div class="ant-ribbon-corner"></div>
  </div>
}

